<template>
  <div class="list-container">
     <div class='topbar clearfix'>
          <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{path:'/mobile/bannerList'}">移动端管理</el-breadcrumb-item>
              <el-breadcrumb-item>首页Banner配置</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="fr topRight">
                <span>共{{total}}条数据</span>
                <router-link to="/mobile/bannerList/addBanner/0">
                    <div class="addProject">新增banner</div>
                </router-link>
                <div class="seach clearfloat">
                  <el-input v-model="seachName" @keyup.native.enter="seachClick" style="float:left;width:60%" placeholder="请输入标题关键字进行搜索"></el-input>
                  <div class="seachBtn" @click="seachClick">搜索</div>
                </div>
            </div>
       </div>
       <div class="header">
            <div class="list clearfloat">
              <span>展位状态</span>
              <el-select 
              popper-class='objOperStatus' 
              @change='operStatusChange'
              v-model="dataParm.showType" 
              placeholder="请选择">
                <el-option
                  :label="item.desc" 
                  v-for="(item,index) in selectshowType" 
                  :key="index" 
                  :value="item.code">
                </el-option>
              </el-select>
            </div>
       </div>
       <div class="nav">
           <div class="tableHeader clearfloat">
               <div class="tableLi tableHeaderImg">缩略图</div>
               <div class="tableLi tableHeaderDetail">标题</div>
               <div class="tableLi tableHeaderOrder">展位排序值 <i class="el-icon-warning" title="顺序值越大在C端的显示越靠前"></i></div>
               <div class="tableLi tableHeaderStatus">状态</div>
               <div class="tableLi tableHeaderDate">展示时间</div>
               <div class="tableLi tableHeaderHandle">操作</div>
           </div>
           <ul class="navList clearfloat">
              <li v-if='!navList.length' class='nodata'>暂无数据</li>
               <li v-for="(item,index) in navList" :key="index" v-else>
                   <div class="table clearfloat">
                        <!-- 缩略图 -->
                        <div class="tableDiv HeaderImg" ref="HeaderImg">
                          <img :src="item.attachDetail.fileUrl" />
                        </div>
                        <!-- 标题 -->
                        <div class="tableDiv HeaderDetail" ref="HeaderDetail">
                             <div class="topList clearfloat">
                                 <h3>{{item.title}}</h3>
                             </div>
                        </div>
                        <!-- 展位排序值 -->
                        <div class="tableDiv HeaderOrder" ref="HeaderOrder">{{item.sort}}</div>
                        <!-- 状态  -->
                        <div class="tableDiv HeaderStatus" ref="HeaderStatus">
                          <p class="miueList" :class="getshowType(item.bannerShowType).styColor">{{getshowType(item.bannerShowType).desc}}</p>
                        </div>
                        <!--展示时间  -->
                        <div class="tableDiv HeaderDate" ref="HeaderDate">
                            <span>{{getTimeDate(item.showTimeBegin,'yyyy-MM-dd hh:mm')}}</span><br/>
                            <span>至</span><br/>
                            <span>{{getTimeDate(item.showTimeEnd,'yyyy-MM-dd hh:mm')}}</span>
                        </div>
                        <!-- 操作 -->
                        <div class="tableDiv HeaderHandle clearfloat" ref="HeaderHandle">
                          <div> 
                            <div class="HandleList" @click.stop="ToEidt(1,item)">编辑</div>
                            <div class="HandleList" @click.stop="delBanner(item,index)" >删除</div>
                          </div>
                        </div>
                   </div>
               </li>
           </ul>
           <div class="pagination" v-if="total>dataParm.pageSize">
              <el-pagination
                  background
                  :current-page.sync='dataParm.pageNo'
                  @current-change="handleCurrentChange"
                  :page-size="dataParm.pageSize"
                  :pager-count="11"
                  layout="prev, pager, next"
                  :total="total">
              </el-pagination>
            </div>
       </div>
       <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="300px"
        :before-close="handleClose">
        <span>{{dialogContent}}</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="sureBtn()">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import api from "@/fetch/url";
import {FormatDate,transformPrice} from '@/utils/index.js'
export default {
  data() {
    return {
        showType:[],
        selectshowType:[{
          code:'',
          desc:'不限'
        }],
        dataParm:{
          keyWord:'',
          showType:'',
          projectId:'',
          pageNo:1,
          pageSize:10
        },
       seachName:"",
       navList:[],
       total:0,
       merchSaleType:[],
       dialogVisible:false,
       delItem:{},
       dialogType:-1,//1上架下架商品2删除商品
       dialogContent:'',
       projectStateActive:-1,
       projectName:'',
        options: [],
    }
  },
  created() {
    api.enumsAll({},{
      headers: {
          'Content-Type': 'application/json;charset=UTF-8'
      }
    }).then(json => {
      if(json){
           this.showType = json.bannerShowType;
           this.selectshowType = this.selectshowType.concat(json.bannerShowType);
      }
    });
    this.getBannerPage();
  },
  computed:{
      getTimeDate(){//获取时间戳
        return (time,format)=>{
          if(time){
            return FormatDate(new Date(Number(time)),format)
          }
        }
      },
      getshowType(){//获取商品状态
        return (status)=>{
          if(!this.showType.length){
            return false;
          }
          let goodsState = {};
          for(let item of this.showType){
             switch(item.code){
                case 0://待展示
                  item.styColor = 'BeopenedStatus';
                break;
                case 1://展示中
                  item.styColor = 'upIng';
                break;
                case 2://已下架
                  item.styColor = 'closeStatus';
                break;
            };
            if(item.code == status){
              goodsState = {
                desc:item.desc,
                styColor:item.styColor 
              }
              return goodsState;
            }
          }
        }
      },
  },
  mounted() {
    
  },
  methods: {
    selectChange(){
       this.getBannerPage();
    },
    operStatusChange(){
       this.dataParm.pageNo = 1;
       this.getBannerPage();
     },
     getBannerPage(){
       api.bannerPage({...this.dataParm}).then(json=>{
         console.log(json.list)
          this.navList = json.list;
          this.total = json.total
       })
     },
    ToEidt(oprate,item){//去编辑
        this.$router.push({
          path:'/project/bannerList/addBanner',
          name:'addBanner',
          params:{
              id:item.id,
          },
          query:{
            posi:oprate,
            type:item.showType
          }
        })
    },
    delBanner(item,index){//删除banner
      this.dialogVisible = true;
      this.delItem = item;
      this.delItem.index = index;
      this.dialogContent = '是否确认删除？'
    },
    handleClose(){
      this.dialogVisible = false;
    },
    sureBtn(){
        api.delBanner({
          id:this.delItem.id,
        }).then(json=>{
          this.toastMsg('删除成功','success');
          this.getBannerPage();
          // this.navList.splice(this.delItem.index,1);
          this.delItem = {};
          this.dialogVisible = false;
        })
    },
    toastMsg(msg,type){
      this.$message({
        message: msg,
        type: type
      });
    },
    //点击搜索
    seachClick(){
       this.dataParm.pageNo = 1;
       this.dataParm.keyWord = this.seachName;
       this.getBannerPage();
    },
     //点击分页触发列表接口
     handleCurrentChange(val) {
       this.dataParm.pageNo = val;
       this.getBannerPage();
     }
  }
}
</script>
<style>
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
  background-color: #fff;
}
.el-dialog{
    border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
}
.projectNameSelect .el-select-dropdown__item {
   overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}
  .projectNameSelect  .el-select-dropdown__item.selected{
    color: #FC612A;
  }
</style>
<style lang="scss" scoped>
  // .list-container{
  //   min-width: 1080px;
  // }
  .header {
      width: 100%;
      // min-width:1180px;
      border-radius:4px;
      height: 44px;
      display: flow-root;
      padding-left: 0;
       .list{
          margin-top: 10px;
              padding-left: 10px;
       }
      .navList {
          box-sizing: border-box;
          height: 44px;
          padding-left: 10px;
          .h5,.input,.numberP {
            float: left;
          }
          .h5 {
            font-size: 14px;
            color: #262626;
            font-weight: normal;
            margin-right: 12px;
            height: 44px;
            line-height: 44px;
          }
          .dateShop {
            width:40%;
          }
          .numberShop {
            width:300px;
          }
          .uploadDetail {
            float: left;
             .upload {
               width:150px;
               height: 115px;
               border: 1px solid #DCDFE6;
               border-radius: 4px;
               text-align: center;
               line-height: 115px;
               color: #ccc;
               cursor: pointer;
             }
             p {
               margin-top:20px;
               color: #ccc;
               font-size:14px;
             }
          }
          .checkDetail {
            float: left;
            
            .checkListAll {
              margin-top:20px;
              span {
                float: left;
              }
              .checkList {
                float: left;
                margin-left:20px;
              }
            }
            .checkListAll:first-child{
                 margin-top:12px;
            }
          }
      }
  }
  .nav {
    .top {
      padding:20px 0 0px 0;
      box-sizing: border-box;
      .addProject {
        float: left;
        width: 150px;
        height: 40px;
        color: #fff;
        text-align: center; 
        background: #1890ff;
        cursor: pointer;
        border-radius: 4px;
        line-height: 40px;
      }
      span {
        float: left;
        margin-left:30px;
        line-height: 40px;
      }
    }
    .navList {
      padding:0;
      margin:0;
      li {
         border-bottom: 1px solid #E9E9E9;
         float: left;
         width:100%;
         background: #fff;
         min-width:1180px;      
         cursor: pointer;
         margin-top: 0;
        .table {
            padding: 14px 16px;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            // align-items: center;
            .tableDiv {
              float: left;
              margin-left:20px;
              .miueList {
                height: 20px;
                text-align: center;
                line-height: 20px;
                font-size: 14px;
                color: #fff;
              };
              .upIng{
                color: #FC612A
              }
              .closeStatus{
                color: #8C8C8D
              }
              .BeopenedStatus{
                color: #26A9FF;
              }
            }
            .HeaderImg {
              margin-left:0px;
              img{
                width: 120px;
                height: 86px;
                background: #ccc;

              }
            }
            .HeaderDetail {
              // width:calc(100% - 820px);
              .topList {
                 h3 {
                  //  float: left;
                   max-width:calc(100% - 80px);
                   overflow:hidden;
                    white-space:nowrap;
                    text-overflow:ellipsis;
                    font-size: 14px;
                    color: #262626;
                    // margin: 0 auto;
                    // text-align: center;
                 }
              }
              .fontDetail {
                // float: left;
                // width: calc(100% - 120px);
                // margin: 0 auto;
                // text-align: center;
                max-height:70px;
                text-overflow:ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp:3;
                overflow: hidden;
                color: #777777;
                font-size:12px;
                margin-top:12px;
                line-height: 18px;
              }
            }
            .HeaderOrder{
                text-align: center;
            }
         
            .HeaderDate {
               position: relative;
              height: 40px;
              text-align: center;
              span{
                font-size: 12px;
                color: #262626;
              }
            }
            .HeaderHandle {
              text-align: center;
              .HandleList {
                width:100%;
                text-align: center;
                font-size: 12px;
                color: #26A9FF;
                cursor: pointer;
                margin-bottom:8px;
              }
              .HandleList:hover {
                  opacity: 0.8;
              }
            }
        }
        .font {
          background: #F5F5F7;
          height: 32px;
          line-height: 32px;
          padding-left: 12px;
          p {
            float: left;
            box-sizing: border-box;
            font-size: 12px;
            color: #777777;
            margin-right:20px;
            .blue {
              color: #262626;
              cursor: pointer;
              &:hover{
                opacity: 0.8;
              }
            }
            &:nth-of-type(2){
              float:right;
            }
             &:nth-of-type(3){
              float:right;
            }
          }
          .line{
            float: right;
            display: inline-block;
            width: 1px;
            height: 12px;
            background: #777;
            position: relative;
            top: 10px;
            left: -9px;
          }
        }
      }
      .nodata{
        width: 100%;
        height:200px;
        line-height: 200px;
        text-align:center;
      }
    }
    .pagination {
      margin-top:30px;
      text-align: center;
    }
    .tableHeader {
      padding:0 20px;
      box-sizing: border-box;
      margin:10px 0 0 0;
      min-width:1180px;
      border-bottom: 1px solid #E9E9E9;
      .tableLi {
        float: left;
        margin-right:20px;
        font-size: 12px;
        color: #777777;
        height: 32px;
        line-height: 32px;
        text-align: center;
      }
      .tableHeaderDetail {
        text-align: left;
      }
    }
    .tableHeaderImg ,.HeaderImg{
      width: 120px;
    }
    .tableHeaderDetail ,.HeaderDetail{
      width:calc(100% - 720px);
    }
    .tableHeaderOrder ,.HeaderOrder{
      width:100px;
    }
    .tableHeaderOrder{
      i{
        margin-left: 4px;
      }
    }
    .tableHeaderStatus,.HeaderStatus {
      width:100px;
    }
    .tableHeaderDate ,.HeaderDate{
      width: 150px;
    }
    .tableHeaderHandle,.HeaderHandle {
        width: 100px;
        text-align: center;
    }
  }
</style>